<template>
    <div>
        <div class="my">
            <div>{{$t('langs.Centers.order.name')}}</div>
            <ul>
                <li>{{$t('langs.Centers.order.li1')}}</li>
                <li>{{$t('langs.Centers.order.li2')}}</li>
                <li>{{$t('langs.Centers.order.li3')}}</li>
                <li>{{$t('langs.Centers.order.li4')}}</li>
                <li>{{$t('langs.Centers.order.li5')}}</li>
                <li>{{$t('langs.Centers.order.li6')}}</li>
                <li>{{$t('langs.Centers.order.li7')}}</li>
            </ul>
            <ul class="myitem" v-for="(item,index) in 5" :key="index">
                <li>
                    <img src="../assets/img/0FB.png" alt="">
                    <p>3件装 | MEDIHEAL 美迪惠尔 N.M.F针剂水库保湿面膜 10片/盒</p>
                </li>
                <li>13249522564145</li>
                <li>￥8000.00</li>
                <li>1</li>
                <li>￥8000.00</li>
                <li>
                    <span>{{$t('langs.Centers.order.logistics')}}</span>
                    <span>{{$t('langs.Centers.order.logistics1')}}</span>
                </li>
                <li>
                    <span class="span1">{{$t('langs.Centers.order.span1')}}</span>
                    <button class="but1">{{$t('langs.Centers.order.but1')}}</button>
                    <button class="but2" @click="tologistics">{{$t('langs.Centers.order.but2')}}</button>
                    <span class="span2">{{$t('langs.Centers.order.span2')}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        tologistics() {
            this.$router.push({
                path: '/logistics'
            })
        }
    },
}
</script>

<style lang='scss'>
.my {
    width: 990px;
    >div:nth-child(1) {
        font-size: 16px;
    }
    >ul:nth-child(2) {
        width: 990px;
        overflow: hidden;
        margin-top: 9px;
        border-bottom: 1px solid #E6E6E6;
        >li {
            float: left;
            font-size: 14px;
            line-height: 37px;
            text-align: center;
            // padding: 0 20px;
            overflow: hidden;
        }
        >li:nth-child(1) {
            width: 336px;
        }
        >li:nth-child(2) {
            width: 154px;
        }
        >li:nth-child(3) {
            width: 68px;
        }
        >li:nth-child(4) {
            width: 70px;
        }
        >li:nth-child(5) {
            width: 98px;
        }
        >li:nth-child(6) {
            width: 100px;
        }
        >li:nth-child(7) {
            width: 140px;
        }
    }
    >.myitem {
        padding: 23px 2px 18px 0px;
        overflow: hidden;
        border-bottom: 1px solid #E6E6E6;
        >li {
            overflow: hidden;
            float: left;
            font-size: 12px;
            text-align: center;
            >img {
                width: 110px;
                height: 110px;
                vertical-align: top;
               float: left;
            }
            >p {
                float: left;
                font-size: 12px;
                width: 217px;
                margin-top: 17px;
                margin-left: 9px;
                line-height: 20px;
                text-align: left;
            }
        }

        >li:nth-child(2) {
            width: 154px;
            padding-top: 17px;
        }
        >li:nth-child(3) {
            width: 68px;
            padding-top: 17px;
        }
        >li:nth-child(4) {
            width: 70px;
            padding-top: 17px;
        }
        >li:nth-child(5) {
            width: 98px;
            padding-top: 17px;
        }
        >li:nth-child(6) {
            width: 100px;
            padding-top: 17px;
            >span {
                display: inline-block;
            }
            >span:nth-child(2) {
                margin-top: 4px;
                font-weight: 800;
                cursor: pointer;
            }
        }
        >li:nth-child(7) {
            width: 140px;
            padding-top: 8px;
            >span {
                display: block;
            }
            >button {
                font-size: 13px;
                width: 78px;
                height: 26px;
                border-radius: 2px;
                margin-bottom: 6px;
                cursor: pointer;
                outline: none;
            }
            >.span1 {
                font-size: 10px;
                margin-bottom: 4px;
            }
            >.span2 {
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
            }
            >.but1 {
                background: #000;
                color: #fff;
            }
            >.but2 {
                background: #fff;
                border: 1px solid #bbb;
            }
        }
    }
}
</style>